<!-- -->
<template>

    <el-container>
        <el-header class="header-container">
            <i class="el-icon-bell" id="notify-icon"></i>
            <el-avatar class="avatar-container" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        </el-header>
        <el-container class="" style="width: 100%;position: relative; overflow: hidden">
            <el-aside style="height: 100%;position: fixed;left: 0px; top:60px; background-color: rgb(84, 92, 100)">
                <el-menu
                            default-active="1-4-1"
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose"
                            background-color="#545c64"
                            text-color="#fff"
                            active-text-color="#ffd04b"
                        >
                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    <span slot="title">导航一</span>
                                </template>
                                <el-menu-item-group>
                                    <span slot="title">分组一</span>
                                    <el-menu-item index="1-1">选项1</el-menu-item>
                                    <el-menu-item index="1-2">选项2</el-menu-item>
                                </el-menu-item-group>
                                <el-menu-item-group title="分组2">
                                    <el-menu-item index="1-3">选项3</el-menu-item>
                                </el-menu-item-group>
                                <el-submenu index="1-4">
                                    <span slot="title">选项4</span>
                                    <el-menu-item index="1-4-1">选项1</el-menu-item>
                                </el-submenu>
                            </el-submenu>
                            <el-menu-item index="2" class="navbar-two">
                                <i class="el-icon-menu"></i>
                                <span slot="title">导航二</span>
                            </el-menu-item>
                            <el-menu-item index="3" disabled>
                                <i class="el-icon-document"></i>
                                <span slot="title">导航三</span>
                            </el-menu-item>
                            <el-menu-item index="4">
                                <i class="el-icon-setting"></i>
                                <span slot="title">导航四</span>
                            </el-menu-item>
                        </el-menu>
            </el-aside>
            <el-container style="background-color: darkcyan; width: 100%; height: 100%; position: absolute; left: 200px;">
                <el-main></el-main>
                <el-footer></el-footer>
            </el-container>
        </el-container>
    </el-container>


</template>

<script>
export default {
    name: "HomeIndex",
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    }
}

</script>
<style lang="scss" scoped>
.el-menu-vertical-demo {
    border: none;
}
.header-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .el-icon-bell {
        margin: 0px 20px;
        font-size: 24px;
    }
    .avatar-container {
        margin-right: 10px;
    }
}

</style>
